<template>
    <div class="app-container">
        <div class="adminSearchBox">
            <div class="adminSearchTop">
                <div class="adminSearchLeft">
                    <Search style="width: 1em; height: 1em; margin-right: 8px" />
                    <div>筛选搜索</div>
                </div>
                <div class="adminSearchRight">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="queryList">查询搜索</el-button>
                </div>
            </div>
            <div class="parentSearchBox">
                <div class="adminSearch">
                    <span> 品牌名称：</span>
                    <el-input size="default" v-model="adminSearchVal.brandName" placeholder="请输品牌名称" />
                </div>
                <div class="adminSearch">
                    <span> 推荐状态：</span>
                    <el-select v-model="adminSearchVal.recommendStatus" class="m-2" placeholder="全部" size="default"
                        @change="selectChange">
                        <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
                    </el-select>
                </div>

            </div>
        </div>
        <div class="dataListBox">
            <div class="TicketsLeft">
                <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                <div>数据列表</div>
            </div>
            <el-button type="primary" @click="addFn" v-permission="'addUser'">选择品牌</el-button>

        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" style="text-align: center;" />
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="brandName" label="品牌名称" />
            <el-table-column label="是否推荐">
                <template #default="{ row }">
                    <el-switch v-model="row.recommendStatus" :active-value="1" :inactive-value="0"
                        @click="hdSwitchStatus(row)" />
                </template>
            </el-table-column>

            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="recommendStatus" label="状态">
                <template #default="{ row }">
                    {{ row.recommendStatus == 0 ? '未推荐' : '推荐中' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="editFn(row)">设置排序</el-button>
                    <el-button link type="primary" size="small" @click="deleteFn(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- ------------批量------------- -->
        <div class="advertiseFoot">
            <div>
                <el-select v-model="allDelVal" class="allDelVal" placeholder="批量操作" size='default'
                    @change="allDelValChange">
                    <el-option v-for="item in allOptions" :key="item.type" :label="item.label" :value="item.type" />
                </el-select>
                <el-button type="primary" @click="chooseConfirm">确认</el-button>
            </div>
            <!-- 分页 -->
            <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />


            <el-dialog :model-value="sortIsShow" title="设置排序">
                <el-form :model="tableData">
                    <el-form-item label="排序：">
                        <el-input v-model="sort" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="sortIsShow = false">取消</el-button>
                        <el-button type="primary" @click="hdSort">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>

            <homeBrandChooseDialog :homeBrandChooseDialogVisible="homeBrandChooseDialogVisible" @cancel="hdCancel"
                @confirm="hdConfirm" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import * as http from '@/request/http';
import useTable from '@/hooks/components/useTable'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Tickets } from '@element-plus/icons-vue'
import homeBrandChooseDialog from "./components/homeBrandChoose.vue"

const homeBrandChooseDialogVisible = ref(false)

const hdCancel = () => {
    homeBrandChooseDialogVisible.value = false

}
const hdConfirm = () => {
    queryList()
    homeBrandChooseDialogVisible.value = false
}









const adminSearchVal = reactive({
    recommendStatus: '',
    brandName: '',
})
const selectChange = () => {
}
const reset = () => {
    adminSearchVal.recommendStatus = ''
    adminSearchVal.brandName = ''
}
const options = [
    {
        type: '0',
        label: '未推荐',
    },
    {
        type: '1',
        label: '推荐中',
    }
]

const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.homeBrand.homeBrandList, adminSearchVal)
const addFn = () => {
    homeBrandChooseDialogVisible.value = true
}
// 表格数据
interface User {
    id: number
}

const multipleSelection = ref<User[]>([])
let arr: number[] = []
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    // console.log(val);
    multipleSelection.value.forEach(item => {
        arr.push(item.id)
    })
}




const deleteFn = (ids: number | string) => {
    ElMessageBox.confirm(
        '是否确认删除',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.homeBrand.homeBranDelete({ ids: ids }).then(res => {
                if (res.code === 200) {
                    console.log(res);
                    ElMessage.success('删除成功')
                    queryList()

                } else {
                    ElMessage.error('批量删除失败')
                }
            })
        })
        .catch(() => {
            ElMessage.success('取消成功')
        })

}
// 批量删除
const allDelVal = ref('')
let newArr: number[] = []
const allDelValChange = () => {
    newArr = arr
}


const allOptions = [

    {
        type: 0,
        label: '设为推荐',
    },
    {
        type: 1,
        label: '取消推荐',
    },
    {
        type: 2,
        label: '删除',
    },
]

const chooseConfirm = () => {
    let ids = multipleSelection.value.map(item => item.id).join(',')
    // console.log(ids);//224,222
    if (newArr.length > 0) {
        if (allDelVal.value == '0') {

            ElMessageBox.confirm(
                '是否要修改上线/下线状态?',
                'Warning',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    http.homeBrand.homeBrandUpdateRecommendStatus({ ids: ids, recommendStatus: 1 }).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            ElMessage.success('更新成功');
                            queryList()
                        } else {
                            adminSearchVal.recommendStatus = adminSearchVal.recommendStatus == '1 ' ? '0' : '1'
                            ElMessage.error('更新失败')
                        }
                    })
                }).catch(() => {
                    adminSearchVal.recommendStatus = adminSearchVal.recommendStatus == '1 ' ? '0' : '1'
                    ElMessage.success('已取消操作')
                    queryList()
                })

        }
        if (allDelVal.value == '1') {

            adminSearchVal.recommendStatus = ''
            recommend()

        }
        if (allDelVal.value == '2') {
            deleteFn(ids)
        }
        adminSearchVal.recommendStatus = ''
    } else {
        ElMessage.warning('请至少选择一条选项')
    }
}
//更改状态
const hdSwitchStatus = (row: HomeBrandList) => {
    ElMessageBox.confirm(
        '是否要修改上线/下线状态?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            http.homeBrand.homeBrandUpdateRecommendStatus({ ids: row.id, recommendStatus: row.recommendStatus }).then(res => {
                console.log(res);
                ElMessage.success('更新成功');
                queryList()

            })
        }).catch(() => {
            row.recommendStatus = row.recommendStatus == 1 ? 0 : 1
            console.log(row.recommendStatus);
            ElMessage.success('已取消操作')
            arr = []
            queryList()
        })
}
const recommend = () => {
    let ids = multipleSelection.value.map(item => item.id).join(',')
    console.log(ids);//224,222
    ElMessageBox.confirm(
        '是否要修改上线/下线状态?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            http.homeBrand.homeBrandUpdateRecommendStatus({ ids: ids, recommendStatus: Number(adminSearchVal.recommendStatus) }).then(_res => {
                ElMessage.success('更新成功');
                queryList()

            })
        }).catch(() => {
            adminSearchVal.recommendStatus = adminSearchVal.recommendStatus == '1 ' ? '0' : '1'
            ElMessage.success('已取消操作')
            queryList()
        })
}

// ---------------排序-----------------
const sortIsShow = ref(false)
const sort = ref('')
const id = ref<number>(-1)


const editFn = (row: IAdvertiseList) => {
    console.log(row);
    sortIsShow.value = true
    sort.value = row.sort.toString()
    id.value = row.id
}
const hdSort = () => {
    sortIsShow.value = false
    ElMessageBox.confirm(
        '是否要修改上线/下线状态?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            http.homeBrand.homeBranSortByID({ id: id.value, sort: sort.value }).then(res => {
                if (res.code == 200) {
                    ElMessage.success('设置成功')
                    queryList()
                }
            })
        }).catch(() => {
            ElMessage.success('取消设置')
        })

}
</script>

<style scoped>
.parentSearchBox {
    display: flex;
    padding: 5px;
}

.adminSearchBox {
    margin-top: 40px;
    padding: 20px;
    height: 90px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .adminSearchTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .adminSearchLeft {

            display: flex;
            align-items: center;
        }
    }
}

.adminSearch {
    padding-left: 50px;
    padding-top: 20px;
    margin-right: 40px;

    .el-input {
        width: 190px;
    }
}

.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}

.advertiseFoot {

    margin-top: 20px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.allDelVal {
    margin-right: 20px;
}

:deep(.cell) {
    text-align: center;
}
</style>